﻿  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
		
		<title>Ordering rows grouped in two levels</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
			td.subgroup {
				background-color: #D1CFD0;
				border-bottom: 2px solid #A19B9E;
				text-align: center;
			}
		</style>

        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.rowReordering.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.rowGrouping.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
		    $(document).ready(function () {
		        $('#example').dataTable({aoColumns:[{bVisible: false},null,null,null,null,null]})
				.rowGrouping({	iGroupingColumnIndex: 1, iGroupingColumnIndex2: 5,
									sGroupLabelPrefix: "Rendering Engine - ",
									sGroupLabelPrefix2: "CSS Class - ",
									bHideGroupingColumn2: false})
                                .rowReordering({ iIndexColumn:0,bGroupingUsed: true });

		    });
		</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17838786-5']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	</head>




<body id="dt_example">

		<div id="container">
			<a href="index.html">Home</a>
			<a href="http://code.google.com/p/jquery-datatables-editable/wiki/Overview">Wiki</a> 
			<h1 class="full_width big">

				JQuery DataTable Row Reordering
			</h1>
						
			
			<h2>Live example</h2>







			<div id="demo">





<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
        <th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
        <th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>

	</tfoot>
	<tbody>
    	
    	<tr data-position="1" class="odd_gradeX" id="100"><td>1</td>
			<td>Alpha</td>
			<td>Internet Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center">4</td>

			<td class="center">C</td>
		</tr>
		<tr data-position="2" class="even_gradeC" id="101"><td>2</td>
			<td>Alpha</td>
			<td>Internet Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>

			<td class="center">C</td>
		</tr>
		<tr data-position="3" class="odd_gradeA" id="102"><td>3</td>
			<td>Alpha</td>
			<td>Internet Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="4" class="even_gradeA" id="103"><td>4</td>
			<td>Alpha</td>
			<td class="read_only">Internet Explorer 6(read only cell)</td>
			<td>Win 98+</td>
			<td class="center">6</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="5" class="odd_gradeA" id="104"><td>5</td>
			<td>Alpha</td>
			<td>Internet Explorer 7</td>
			<td class="read_only">Win XP SP2+(read only cell)</td>
			<td class="center">7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="6" class="even_gradeA" id="105"><td>6</td>
			<td>Alpha</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>

			<td class="center read_only">C</td>
		</tr>
		<tr data-position="7" class="odd_gradeA" id="106"><td>7</td>
			<td>Gecko</td>
			<td>Firefox 1.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="8" class="even_gradeA" id="107"><td>8</td>
			<td>Gecko</td>
			<td>Firefox 1.5</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="9" class="odd_gradeA" id="108"><td>9</td>
			<td>Gecko</td>
			<td>Firefox 2.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="10" class="even_gradeA" id="109"><td>10</td>
			<td>Gecko</td>
			<td>Firefox 3.0</td>
			<td>Win 2k+ / OSX.3+</td>
			<td class="center">1.9</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="11" class="odd_gradeA" id="110"><td>11</td>
			<td>Gecko</td>
			<td>Camino 1.0</td>
			<td>OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="12" class="even_gradeA" id="111"><td>12</td>
			<td>Gecko</td>
			<td>Camino 1.5</td>
			<td>OSX.3+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="13" class="odd_gradeA" id="112"><td>13</td>
			<td>Gecko</td>
			<td>Netscape 7.2</td>
			<td>Win 95+ / Mac OS 8.6-9.2</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="14" class="even_gradeA" id="113"><td>14</td>
			<td>Gecko</td>
			<td>Netscape Browser 8</td>
			<td>Win 98SE+</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="15" class="odd_gradeA" id="114"><td>15</td>
			<td>Gecko</td>
			<td>Netscape Navigator 9</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="16" class="even_gradeA" id="115"><td>16</td>
			<td>Gecko</td>
			<td>Mozilla 1.0</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="17" class="odd_gradeA" id="116"><td>17</td>
			<td>Gecko</td>
			<td>Mozilla 1.1</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="18" class="even_gradeA" id="117"><td>18</td>
			<td>Gecko</td>
			<td>Mozilla 1.2</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.2</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="19" class="odd_gradeA" id="118"><td>19</td>
			<td>Gecko</td>
			<td>Mozilla 1.3</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.3</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="20" class="even_gradeA" id="119"><td>20</td>
			<td>Gecko</td>
			<td>Mozilla 1.4</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.4</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="21" class="odd_gradeA" id="120"><td>21</td>
			<td>Gecko</td>
			<td>Mozilla 1.5</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.5</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="22" class="even_gradeA" id="121"><td>22</td>
			<td>Gecko</td>
			<td>Mozilla 1.6</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.6</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="23" class="odd_gradeA" id="122"><td>23</td>
			<td>Gecko</td>
			<td>Mozilla 1.7</td>
			<td>Win 98+ / OSX.1+</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="24" class="even_gradeA" id="123"><td>24</td>
			<td>Gecko</td>
			<td>Mozilla 1.8</td>
			<td>Win 98+ / OSX.1+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="25" class="odd_gradeA" id="124"><td>25</td>
			<td>Gecko</td>
			<td>Seamonkey 1.1</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="26" class="even_gradeA" id="125"><td>26</td>
			<td>Gecko</td>
			<td>Epiphany 2.20</td>
			<td>Gnome</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="27" class="odd_gradeA" id="126"><td>27</td>
			<td>How</td>
			<td>Safari 1.2</td>
			<td>OSX.3</td>
			<td class="center">125.5</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="28" class="even_gradeA" id="127"><td>28</td>
			<td>How</td>
			<td>Safari 1.3</td>
			<td>OSX.3</td>
			<td class="center">312.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="29" class="odd_gradeA" id="128"><td>29</td>
			<td>How</td>
			<td>Safari 2.0</td>
			<td>OSX.4+</td>
			<td class="center">419.3</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="30" class="even_gradeA" id="129"><td>30</td>
			<td>How</td>
			<td>Safari 3.0</td>
			<td>OSX.4+</td>
			<td class="center">522.1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="31" class="odd_gradeA" id="130"><td>31</td>
			<td>How</td>
			<td>OmniWeb 5.5</td>
			<td>OSX.4+</td>
			<td class="center">420</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="32" class="even_gradeA" id="131"><td>32</td>
			<td>How</td>
			<td>iPod Touch / iPhone</td>
			<td>iPod</td>
			<td class="center">420.1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="33" class="odd_gradeA" id="132"><td>33</td>
			<td>How</td>
			<td>S60</td>
			<td>S60</td>
			<td class="center">413</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="34" class="even_gradeA" id="133"><td>34</td>
			<td>Kappa</td>
			<td>Opera 7.0</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="35" class="odd_gradeA" id="134"><td>35</td>
			<td>Kappa</td>
			<td>Opera 7.5</td>
			<td>Win 95+ / OSX.2+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="36" class="even_gradeA" id="135"><td>36</td>
			<td>Kappa</td>
			<td>Opera 8.0</td>
			<td>Win 95+ / OSX.2+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="37" class="odd_gradeA" id="136"><td>37</td>
			<td>Kappa</td>
			<td>Opera 8.5</td>
			<td>Win 95+ / OSX.2+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="38" class="even_gradeA" id="137"><td>38</td>
			<td>Kappa</td>
			<td>Opera 9.0</td>
			<td>Win 95+ / OSX.3+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="39" class="odd_gradeA" id="138"><td>39</td>
			<td>Kappa</td>
			<td>Opera 9.2</td>
			<td>Win 88+ / OSX.3+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="40" class="even_gradeA" id="139"><td>40</td>
			<td>Kappa</td>
			<td>Opera 9.5</td>
			<td>Win 88+ / OSX.3+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="41" class="odd_gradeA" id="140"><td>41</td>
			<td>Kappa</td>
			<td>Opera for Wii</td>
			<td>Wii</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="42" class="even_gradeA" id="141"><td>42</td>
			<td>Kappa</td>
			<td>Nokia N800</td>
			<td>N800</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="43" class="odd_gradeA" id="142"><td>43</td>
			<td>Kappa</td>
			<td>Nintendo DS browser</td>
			<td>Nintendo DS</td>
			<td class="center">8.5</td>

			<td class="center">C/A<sup>1</sup></td>
		</tr>
		<tr data-position="44" class="even_gradeC" id="143"><td>44</td>
			<td>KHTML</td>
			<td>Konqureror 3.1</td>
			<td>KDE 3.1</td>

			<td class="center">3.1</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="45" class="odd_gradeA" id="144"><td>45</td>
			<td>KHTML</td>
			<td>Konqureror 3.3</td>
			<td>KDE 3.3</td>

			<td class="center">3.3</td>
			<td class="center">A</td>
		</tr>
		<tr data-position="46" class="even_gradeA" id="145"><td>46</td>
			<td>KHTML</td>
			<td>Konqureror 3.5</td>
			<td>KDE 3.5</td>

			<td class="center">3.5</td>
			<td class="center">A</td>
		</tr>
		<tr data-position="47" class="odd_gradeX" id="146"><td>47</td>
			<td>Lambda</td>
			<td>Internet Explorer 4.5</td>
			<td>Mac OS 8-9</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="48" class="even_gradeC" id="147"><td>48</td>
			<td>Lambda</td>
			<td>Internet Explorer 5.1</td>
			<td>Mac OS 7.6-9</td>

			<td class="center">1</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="49" class="odd_gradeC" id="148"><td>49</td>
			<td>Lambda</td>
			<td>Internet Explorer 5.2</td>
			<td>Mac OS 8-X</td>

			<td class="center">1</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="50" class="even_gradeA" id="149"><td>50</td>
			<td>Misc</td>
			<td>NetFront 3.1</td>
			<td>Embedded devices</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="51" class="odd_gradeA" id="150"><td>51</td>
			<td>Misc</td>
			<td>NetFront 3.4</td>
			<td>Embedded devices</td>

			<td class="center">-</td>
			<td class="center">A</td>
		</tr>
		<tr data-position="52" class="even_gradeX" id="151"><td>52</td>
			<td>Misc</td>
			<td>Dillo 0.8</td>
			<td>Embedded devices</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="53" class="odd_gradeX" id="152"><td>53</td>
			<td>Misc</td>
			<td>Links</td>
			<td>Text only</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="54" class="even_gradeX" id="153"><td>54</td>
			<td>Misc</td>
			<td>Lynx</td>
			<td>Text only</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="55" class="odd_gradeC" id="154"><td>55</td>
			<td>Misc</td>
			<td>IE Mobile</td>
			<td>Windows Mobile 6</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="56" class="even_gradeC" id="155"><td>56</td>
			<td>Misc</td>
			<td>PSP browser</td>
			<td>PSP</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="57" class="odd_gradeU" id="156"><td>57</td>
			<td>Other browsers</td>
			<td>All others</td>
			<td>-</td>

			<td class="center">-</td>
			<td class="center">U</td>
		</tr>
        
        </tbody>
</table>
			</div>
			<div class="spacer"></div>

			
	
	


			<h2>Other examples</h2>
			<ul>

				<li><a href="default.html">Basic usage</a></li>
                <li><a href="notify.html">Server-side notification</a></li>
                <li><a href="error.html">Server-side error handling</a></li>
                <li><a href="rowGrouping.html">Ordering grouped rows</a></li>
			</ul>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					DataTables Row Reordering Add-on &copy; Jovan Popovic 2012.<br>
					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2012<br>
				</span>
			</div>
		</div>
	</body>





</html>